import * as THREE from 'three'
import createApp from '../../core'

function createHemisphereLightHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)

  const axesHelper = new THREE.AxesHelper(50)
  scene.add(axesHelper)

  const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1)
  scene.add(light)
  let helper = new THREE.HemisphereLightHelper(light, data.sphereSize, data.color)
  scene.add(helper)

  function refresh () {
    scene.remove(helper)
    const { sphereSize, color } = data
    helper = new THREE.HemisphereLightHelper(light, sphereSize, color)
    scene.add(helper)
  }

  const folder = gui.addFolder('相机观察的位置')
  folder.add(data, 'sphereSize', 0, 500).onChange(refresh)
  folder.addColor(data, 'color').onChange(refresh)
}

const data = {
  sphereSize: 100,
  color: 0xff0000
}

export {
  createHemisphereLightHelper
}
